<template>
  <el-dropdown
    class="show-item"
    size="small"
    trigger="click"
    @click="handleClick"
    @command="handleCommand">
    <!-- <i class="iconfont icon-caozuo" v-show="showIcon" />{{ activeItem }} -->
    <el-button>
      命令<i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="(i, index) in dItems" :key="index" :command="i">{{ i }}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  props: {
    showIcon: {
      type: Boolean,
      default: true
    },
    items: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dItems: ['命令'],
      activeItem: '命令'
    }
  },
  watch: {
    items(v) {
      this.dItems = ['命令', ...v]
    }
  },
  methods: {
    handleClick() {
      this.$emit('click', this.activeItem)
    },
    handleCommand(item) {
      this.activeItem = item
      this.$emit('click', this.activeItem)
    }
  },
  created() {
    this.dItems = ['命令', ...this.items]
  }
}
</script>
<style>
.icon-caozuo{ font-size: 12px; padding-right:3px;}

</style>